带你入门 JavaScript ES6 (三)
本文同步带你入门 JavaScript ES6 (三),转载请注明出处。
上一章我们学习了 for of 遍历和扩展字符语法。本章我们主要学习 ES6 中的箭头函数
箭头函数
更准确来说叫 箭头函数表达式。箭头函数余普通函数功能相同,但语法差别比较大。
看下例子:
// 普通函数
let info = ['name', 'age', 'address'].map(function (word){
// 将首字母转换成大写
return word.slice(0, 1).toUpperCase() + word.slice(1)
})
console.log(info)// ["Name", "Age", "Address"]
// 箭头函数
let info2 = ['name', 'age', 'address'].map(word => word.slice(0, 1).toUpperCase() + word.slice(1))
console.log(info2)// ["Name", "Age", "Address"]
1. 箭头函数语法
单独将上例中的函数部分摘取出来,箭头函数相比于普通函数少了 function(){} 这部分语法:
// 普通函数
function (word){
// 将首字母转换成大写
return word.slice(0, 1).toUpperCase() + word.slice(1)
}
// 箭头函数
word => word.slice(0, 1).toUpperCase() + word.slice(1)
总结下简单的箭头函数的语法定义:
step1: 删除普通函数的关键词 function
(word){
return word.slice(0, 1).toUpperCase() + word.slice(1)
}
step2: 删除 圆括号()
word{
return word.slice(0, 1).toUpperCase() + word.slice(1)
}
step3: 删除 花括号{},及关键词 return
word word.slice(0, 1).toUpperCase() + word.slice(1)
step4: 在参数列表与方法体之间加入箭头(=>)
word => word.slice(0, 1).toUpperCase() + word.slice(1)
2. 合法的箭头函数定义
// 1 无参数的箭头函数
let f = () => console.log("箭头函数")
console.log(f())
//*************************************
// 2. 一个参数的箭头函数,参数的圆括号部分可选
// 2.1 带圆括号
let f = (name) => console.log(name)
console.log(f('huliuqing'))
// 2.2 不带圆括号
let f = name => console.log(name)
console.log(f('huliuqing'))
//*************************************
// 3 多个参数的箭头函数,参数一定用圆括号包裹
let f = (name, age) => console.log(`${name} : ${age}`)
console.log(f('huliuqing', 18))
//*************************************
// 4 单行函数体与多行函数体的箭头函数
// 4.1 单行函数体将上面的示例
// 4.2 多行函数体将上面的示例
let f = (name, age) => {
name = `hello ${name}`
age = age + 1
return [name, age]
}
console.log(f('huliuqing', 18))
3. this 值
3.1 普通函数中的 this 值
① this 指向新的对象实例
当使用 new 关键词实例化对象时, this 执行对象实例
function Person() {
console.log(this)
}
var p = new Person()
② this 指向被调用对象
当使用 call/apply 调用对象时,this 指向被调用对象
function getName() {
// console.log(this)
console.log(this.name)
}
let person = {
name: 'huliuqing',
}
getName.call(person);// huliuqing
③ this 指向上下文的调用对象
如果函数由对象实例调用,此时 this 指向对象实例
let Person = {
name: 'huliuqing',
getName: function(){
console.log(this.name)
}
}
Person.getName()//Person 即为上下文环境,因而输出 huliuqing
④ this 指向全局对象或undefined
当调用函数时无上下文环境,在严格模式下 this 指向 undefined
function getName(){
//console.log(this)
console.log(this.name)
}
var name = 'huliuqing'
getName()// this 指向全局对象 Window,因而次数输出 huliuqing
严格模式下 this 为 undefined
function getName(){
'use strict'
console.log(this)
}
var name = 'huliuqing'
getName()// undefined
3.2 箭头函数中的 this 值
对于普通函数而言, this 的值是有函数如何被调用决定的,所以普通函数 this 的值比较随性,难以捕捉。为了解决这个问题,在箭头函数中 this 的值在任何情况下都是基于函数周围上下文,即函数的的 this 和函数外的 this 值一样
// 普通函数在 timeout 中的 name
var Person = {
name: 'huliuqing',
getName: function(){
setTimeout(function(){
console.log(this.name)
}, 1000)
}
}
Person.getName();// undefined
// 将 setTimeout 匿名函数转换成箭头函数后,匿名函数内的 this 值同 getName 函数的上下文一致(即 Person)
var Person = {
name: 'huliuqing',
getName: function(){
setTimeout(() => console.log(this.name)
, 1000)
}
}
Person.getName();// huliuqing
// 将 getName 函数转换成箭头函数,getName 的 this 值依据上下文为 Window
var Person = {
name: 'huliuqing',
getName: () =>{
console.log(this)
setTimeout(() => console.log(this.name)
, 1000)
}
}
Person.getName();// 空,什么都没有
参考资料:
MDN 箭头函数
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。